<template>
	<view class="container">
		<!-- 顶部装饰 -->
		<view class="top-decoration">
			<view class="cloud cloud-1"></view>
			<view class="cloud cloud-2"></view>
			<view class="sun"></view>
		</view>

		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 欢迎信息 -->
			<view class="welcome">
				<text class="title animate__animated animate__fadeInDown">🌱 欢迎来到农场物语</text>
				<view class="subtitle-wrapper">
					<text class="subtitle animate__animated animate__fadeInUp animate__delay-1s">开启你的田园生活</text>
					<view class="deco-line animate__animated animate__zoomIn animate__delay-2s"></view>
				</view>
			</view>

			<!-- 公告栏 -->
			<view class="notice-board animate__animated animate__fadeInUp animate__delay-1s">
				<view class="notice-header">
					<text class="notice-icon">📣</text>
					<text class="notice-title">最新公告</text>
				</view>
				<swiper class="notice-swiper" vertical autoplay circular interval="3000" :duration="800">
					<swiper-item 
						v-for="(notice, index) in notices" 
						:key="index"
						class="notice-item"
					>
						<text class="notice-text">{{notice}}</text>
					</swiper-item>
				</swiper>
			</view>

			<!-- 主按钮 -->
			<view class="main-button-wrapper animate__animated animate__zoomIn animate__delay-2s">
				<view 
					class="main-button" 
					hover-class="button-hover"
					hover-stay-time="100"
					@click="startGame"
				>
					<view class="button-bg"></view>
					<text class="button-text">🚜 开始务农</text>
					<text class="button-desc">点击进入你的农场</text>
				</view>
			</view>

			<!-- 功能按钮组 -->
			<view class="function-buttons animate__animated animate__fadeInUp animate__delay-3s">
				<view 
					v-for="(btn, index) in functions"
					:key="index"
					class="function-card"
					hover-class="card-hover"
					@click="btn.handler"
				>
					<view class="card-icon">
						<image class="icon" :src="btn.icon" mode="aspectFit"></image>
					</view>
					<text class="card-title">{{btn.title}}</text>
					<view class="card-hover-effect"></view>
				</view>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="grass"></view>
			<view class="flower flower-1"></view>
			<view class="flower flower-2"></view>
			<view class="flower flower-3"></view>
		</view>

		<!-- 弹窗 -->
		<view v-if="showModal" class="modal-mask" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{modalTitle}}</text>
					<text class="modal-close" @click="closeModal">×</text>
				</view>
				<view class="modal-body">
					<text>{{modalContent}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { icons } from './icons.js'

// 可根据实际情况添加或修改图标
// 示例：如果有新图标，可在这里添加
// const newIcons = { newIcon: 'path/to/new/icon.png' }
// Object.assign(icons, newIcons);

export default {
	data() {
		return {
			icons,
			notices: [
				'🌱 欢迎来到农场游戏！',
				'🎁 新手礼包已经准备好啦~',
				'🔧 农场系统升级维护中...',
				'今日天气晴朗，适合种植',
				'🍪 新游戏：饼干点击者已上线！'
			],
			showModal: false,
			modalTitle: '',
			modalContent: '',
			functions: [
				{ title: '活动中心', icon: icons.guide, handler: () => this.goToActivities() },
				{ title: 'AI助手', icon: icons.ai, handler: () => this.goToAIAssistant() },
				{ title: '游戏中心', icon: icons.game, handler: () => this.goToGameCenter() },
				{ title: '任务系统', icon: icons.task, handler: () => this.goToTasks() },
				{ title: '随机图片', icon: icons.random, handler: () => this.goToRandomImage() },
				{ title: '网赚游戏', icon: icons.wallet, handler: () => this.goToMoneyGame() },
				{ title: '爱情花园', icon: icons.love, handler: () => this.goToLoveGarden() },
				{ title: '爱情故事', icon: icons.story, handler: () => this.goToLoveStory() }
			]
		}
	},
	methods: {
		startGame() {
			uni.navigateTo({
				url: '/pages/farm/index'
			})
		},
		showInstructions() {
			this.modalTitle = '游戏说明'
			this.modalContent = '🌱 新手指南：\n\n1. 选择种子进行播种\n2. 定期浇水施肥\n3. 收获成熟的农作物\n4. 出售获得金币\n5. 升级解锁更多内容\n\n💡 小贴士：关注天气变化，合理安排种植时间'
			this.showModal = true
		},
		showSettings() {
			this.modalTitle = '游戏设置'
			this.modalContent = '🎵 背景音乐：开启\n🔊 音效：开启\n📱 消息通知：开启\n🎨 画面质量：高清\n🌈 特效：开启'
			this.showModal = true
		},
		showUserInfo() {
			this.modalTitle = '用户信息'
			this.modalContent = '👤 等级：1\n💰 金币：1000\n⭐ 经验：0/100\n🏆 称号：新手农场主\n🌾 已收获：0次\n🏅 成就：0/100'
			this.showModal = true
		},
		closeModal() {
			this.showModal = false
		},
		goToGame() {
			uni.navigateTo({
				url: '/pages/game/index'
			})
		},
		goToCookieClicker() {
			uni.navigateTo({
				url: '/pages/cookie-clicker/index'
			})
		},
		goToActivities() {
			uni.navigateTo({
				url: '/pages/activities/index'
			})
		},
		goToAIAssistant() {
			uni.navigateTo({
				url: '/pages/ai-assistant/index'
			})
		},
		goToGameCenter() {
			uni.navigateTo({
				url: '/pages/game-center/index',
				success: () => {
					// 传递游戏列表数据
					uni.$emit('gameListUpdate', {
						games: [
							{
								id: 'empire',
								title: '帝国征服',
								icon: icons.game,
								desc: '建立你的帝国，征服世界！',
								route: '/pages/empire/index'
							},
							{
								id: 'cookie',
								title: '饼干点击者',
								icon: icons.cookie,
								desc: '点击饼干，获得更多饼干！',
								route: '/pages/cookie-clicker/index'
							},
							{
								id: 'farm',
								title: '农场物语',
								icon: icons.guide,
								desc: '经营你的农场，收获快乐！',
								route: '/pages/farm/index'
							}
						]
					})
				}
			})
		},
		goToTasks() {
			uni.navigateTo({
				url: '/pages/tasks/index'
			})
		},
		goToRandomImage() {
			uni.navigateTo({
				url: '/pages/random-image/index'
			})
		},
		goToMoneyGame() {
			uni.navigateTo({
				url: '/pages/money-game/index'
			})
		},
		goToAccPage() {
			uni.navigateTo({
				url: '/pages/xc/acc'
			})
		},
		goToBubblePage() {
			uni.navigateTo({
				url: '/pages/xc/bubble_random_popup_page'
			})
		},
		goToXcIndexPage() {
			uni.navigateTo({
				url: '/pages/xc/index'
			})
		},
		goToLoveGarden() {
			uni.navigateTo({
				url: '/pages/xc/love_garden'
			})
		},
		goToLoveStory() {
			uni.navigateTo({
				url: '/pages/xc/love_story'
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	padding: 40rpx;
	background: linear-gradient(180deg, #87CEEB 0%, #98FB98 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: gradientShift 10s infinite alternate;
}

/* 主要内容区 */
.main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx 0;
	position: relative;
	z-index: 1;
}

/* 顶部装饰 */
.top-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200rpx;
	pointer-events: none;
}

.cloud {
	position: absolute;
	width: 100rpx;
	height: 40rpx;
	background: #fff;
	border-radius: 20rpx;
	will-change: transform;
	transition: transform 0.3s ease;
}

.cloud::before,
.cloud::after {
	content: '';
	position: absolute;
	background: #fff;
	border-radius: 50%;
}

.cloud::before {
	width: 50rpx;
	height: 50rpx;
	top: -20rpx;
	left: 15rpx;
}

.cloud::after {
	width: 40rpx;
	height: 40rpx;
	top: -15rpx;
	right: 15rpx;
}

.cloud-1 {
	top: 40rpx;
	left: 10%;
	animation: float 35s infinite linear, bobUpDown 3s infinite ease-in-out;
}

.cloud-2 {
	top: 80rpx;
	left: 60%;
	animation: float 45s infinite linear, bobUpDown 4s infinite ease-in-out 1s;
}

.sun {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
	width: 80rpx;
	height: 80rpx;
	background: #FFD700;
	border-radius: 50%;
	box-shadow: 0 0 40rpx #FFD700;
	animation: glow 4s infinite alternate, spin 60s infinite linear;
	will-change: box-shadow;
}

/* 欢迎区域 */
.welcome {
	margin: 80rpx 0 60rpx;
	text-align: center;
}

.title {
	font-size: 64rpx;
	font-weight: 600;
	color: #2d5a27;
	text-shadow: 0 4rpx 8rpx rgba(106, 163, 92, 0.2);
	letter-spacing: 2rpx;
	position: relative;
	display: inline-block;
	padding: 0 40rpx;
	animation: floatUp 0.8s ease-out forwards;
}

.subtitle-wrapper {
	margin-top: 30rpx;
	position: relative;
}

.subtitle {
	font-size: 36rpx;
	color: #4a785e;
	font-family: cursive;
	display: inline-block;
	background: linear-gradient(45deg, #e1f3d8, #f9f1c7);
	padding: 12rpx 40rpx;
	border-radius: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
	animation: slideInRight 0.8s ease-out 0.3s forwards;
	opacity: 0;
}

.deco-line {
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 6rpx;
	background: #9ccc65;
	border-radius: 3rpx;
}

/* 公告栏 */
.notice-board {
	background: rgba(255,255,255,0.95);
	border-radius: 24rpx;
	padding: 24rpx;
	margin: 0 40rpx 60rpx;
	box-shadow: 0 8rpx 24rpx rgba(76,175,80,0.1);
	border: 2rpx solid rgba(76,175,80,0.1);
	animation: scaleIn 0.6s ease-out 0.5s forwards;
	opacity: 0;
}

.notice-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx dashed #e0e0e0;
}

.notice-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.notice-title {
	font-size: 32rpx;
	color: #4a785e;
	margin-left: 16rpx;
	font-weight: 500;
}

.notice-swiper {
	height: 80rpx;
}

.notice-text {
	font-size: 28rpx;
	color: #666;
	line-height: 80rpx;
	padding-left: 20rpx;
	position: relative;
}

.notice-text::before {
	content: '·';
	color: #9ccc65;
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* 主按钮 */
.main-button-wrapper {
  display: block; /* 确保主按钮容器可见 */
  margin: 0 80rpx 60rpx;
  perspective: 1000rpx;
}

.main-button {
  display: block; /* 确保主按钮可见 */
  background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%);
  padding: 60rpx 40rpx;
  border-radius: 24rpx;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.function-buttons {
  display: grid; /* 确保功能按钮组可见 */
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 30rpx;
  padding: 0 40rpx;
}

.function-card {
  display: block; /* 确保功能按钮可见 */
  background: rgba(255,255,255,0.95);
  border-radius: 24rpx;
  padding: 40rpx 0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  animation: floatUp 0.6s ease-out forwards;
  opacity: 0;
}

.card-icon {
	width: 100rpx;
	height: 100rpx;
	margin: 0 auto 20rpx;
	background: #f8fff6;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(76,175,80,0.1);
}

.card-title {
	font-size: 28rpx;
	color: #4a785e;
	text-align: center;
	display: block;
	font-weight: 500;
}

.card-hover-effect {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(140,195,75,0.1);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* 交互优化 */
.button-hover {
	transform: translateY(-6rpx) scale(1.02);
	box-shadow: 0 12rpx 24rpx rgba(76,175,80,0.3);
}

.card-hover .card-hover-effect {
	opacity: 1;
}

@keyframes floatIcon {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10rpx); }
	100% { transform: translateY(0); }
}

.icon {
	animation: floatIcon 3s ease-in-out infinite;
}

/* 底部装饰 */
.bottom-decoration {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	pointer-events: none;
}

.grass {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60rpx;
	background: linear-gradient(180deg, transparent 0%, #4CAF50 100%);
}

.flower {
	position: absolute;
	bottom: 40rpx;
	width: 20rpx;
	height: 20rpx;
	background: #FFD700;
	border-radius: 50%;
	will-change: transform;
	animation: sway 3s infinite ease-in-out, glow 2s infinite alternate;
}

.flower::before {
	content: '';
	position: absolute;
	width: 40rpx;
	height: 6rpx;
	background: #4CAF50;
	bottom: -6rpx;
	left: -10rpx;
	transform: rotate(-45deg);
}

.flower-1 { left: 20%; animation-delay: 0s; }
.flower-2 { left: 50%; animation-delay: 0.5s; }
.flower-3 { left: 80%; animation-delay: 1s; }

/* 弹窗样式 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	animation: fadeIn 0.3s ease-out;
	backdrop-filter: blur(5px);
}

.modal-content {
	width: 80%;
	max-width: 600rpx;
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
	animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
}

.modal-header {
	padding: 30rpx;
	background: #f8f8f8;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2C3E50;
}

.modal-close {
	font-size: 40rpx;
	color: #95A5A6;
	padding: 0 20rpx;
	cursor: pointer;
}

.modal-body {
	padding: 40rpx;
}

.modal-body text {
	font-size: 28rpx;
	color: #34495E;
	line-height: 1.8;
}

/* 动画关键帧 */
@keyframes float {
	0% { transform: translateX(-20%); }
	100% { transform: translateX(120%); }
}

@keyframes glow {
	from { box-shadow: 0 0 40rpx #FFD700; }
	to { box-shadow: 0 0 60rpx #FFD700; }
}

@keyframes sway {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes bobUpDown {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10rpx); }
}

@keyframes floatUp {
	0% { transform: translateY(20rpx); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
	0% { transform: translateX(50rpx); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
	0% { transform: scale(0.9); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes modalSlideUp {
	0% {
		transform: translateY(50rpx) scale(0.95);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
	.container {
		padding: 20rpx;
	}
	
	.title {
		font-size: 48rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
	}
	
	.function-buttons {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.modal-content {
		width: 90%;
	}
}

@keyframes gradientShift {
	0% {
		background: linear-gradient(180deg, #87CEEB 0%, #98FB98 100%);
	}
	100% {
		background: linear-gradient(180deg, #89CFF0 0%, #90EE90 100%);
	}
}
</style>